<template>
  <el-icon @click="openDrawer" class="icon-style"><Setting /></el-icon>
  <el-drawer v-model="drawerVisible" title="布局设置" size="300px">
    <el-divider>主题颜色</el-divider>
    <div class="flx-row">
      <div
        class="theme-item"
        v-for="item in colorList"
        :key="item"
        :style="{ backgroundColor: item }"
        @click="changePrimary(item)"
      >
        <el-icon v-if="stort.themeCloor == item" class="icon"
          ><Select
        /></el-icon>
      </div>
    </div>
    <el-divider>导航栏颜色</el-divider>
    <div class="flx-row">
      <div
        class="theme-item"
        v-for="item in tabColorList"
        :key="item"
        :style="{ backgroundColor: item }"
        @click="changeTabCole(item)"
      >
        <el-icon v-if="stort.barColor==item" class="icon"
          ><Select
        /></el-icon>
      </div>
    </div>
    <!-- <el-switch v-model="value2" class="mt-2" style="margin-left: 24px" inline-prompt :active-icon="Check" :inactive-icon="Close" /> -->
    <div class="flx-row">
      <div class="flx-tit">侧边栏模式</div>
      <el-switch
        v-model="value2"
        @change="changeGreyOrWeak()"
        class="mt-2"
        style="margin-left: 24px"
        inline-prompt
        :active-icon="Sunny"
        :inactive-icon="Moon"
      />
    </div>
    <div class="flx-row">
      <div class="flx-tit">标签栏是否显示</div>
      <el-switch
        v-model="istags"
        @change="changeTags()"
        class="mt-2"
        style="margin-left: 24px"
      />
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import { useCounterStore } from "@/stores/Shi";
import { Sunny, Moon } from "@element-plus/icons-vue";

const stort = useCounterStore();

const value2 = ref(true);
const istags = ref(true)

// 预定义主题颜色
const colorList = [
  "#4060c7",
  "#409EFF",
  "#009688",
  "#27ae60",
  "#e74c3c",
  "#fd726d",
  "#f39c12",
  "#9b59b6",
];
// 预导航栏颜色
const tabColorList = [
  "#FFFFFF",
  "#333333",
  "#009688",
  "#27ae60",
  "#e74c3c",
  "#fd726d",
  "#f39c12",
  "#9b59b6",
];

// 主题初始化
const drawerVisible = ref(false);
const openDrawer = () => {
  drawerVisible.value = true;
};
// const themeConfig = computed(() => {
//   return globalStore.themeConfig;
// });
//主题颜色
const changePrimary = (val: any) => {
  //  console.log(val,'wdcads');
   stort.changtheme(val)
  //  console.log(globalStore.BlackC(val),'mlp');
  // globalStore.themeConfig.primary = val;
};

const changeTabCole = (val: any) => {
  stort.changBarColor(val)
  // globalStore.dispatch('user/changeTabColor', val)
  // globalStore.BlackA(val)
  // globalStore.themeConfig.tabColor = val
  // globalStore.themeConfig.tabColor = val;
  // if (val) {
  //   globalStore.themeConfig.footColor = val;
  // } else {
  //   globalStore.themeConfig.footColor = val;
  // }
};

const changeGreyOrWeak = () => {
  stort.changMenuColor();
  // globalStore.BlackB(e);
  // globalStore.themeConfig.backgroundColor = e;
  // globalStore.themeConfig.textColor = e
  //  if (globalStore.themeConfig.primary) {
  //   globalStore.themeConfig.backgroundColor = e;
  //   globalStore.themeConfig.textColor = e;
  // } else {
  //   globalStore.themeConfig.backgroundColor = e;
  //   globalStore.themeConfig.textColor = e;
  // }
};

const changeTags = () => {
  stort.changTags()
  // console.log(e,'e');
  // globalStore.BlackL(e);
  //   console.log(globalStore.BlackL(e),'eeeeee');
};


</script>

<style scoped lang="scss">
.icon-style {
  font-size: 20px;
  cursor: pointer;
  margin: 0 11px;
}
.flx-row {
  flex-wrap: wrap;
}
.flx-tit {
  color: #303133;
  flex: 1;
  font-size: 14px;
}
.theme-item {
  margin: 16px 5px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 2px;
  position: relative;
  .icon {
    color: #fff;
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 14px;
  }
}
</style>